<template>
  <div class="box">
    <div class="content">
      <div class="contentbox">
        <!-- 头部 -->
        <div class="header">
          <div class="expenditure">
            <button @click="expenditureFn" :class="{ClickBut: tabOneflag}">支出</button>
          </div>
          <div class="income">
            <button @click="incomeFn" :class="{ClickBut: tabTwoflag}">收入</button>
          </div>
        </div>
        <!-- 内容 -->
        <div class="contents">
          <!-- 支出 -->
          <div class="expenditurebox" v-if="ExpenditureOrIncome">
            <div class="Iconbox" v-for="(item, index) of ExpenseNotClicked" :key="item.iconid" @click="ExpenseClickIcon(index, item.title) ">
            <!-- 实现思路,点击按钮将当前下标值传递给封装的函数那里,然后函数中改变ExpenseClickIndex的值,然后此处判断更改后的值是否为当前的index,然后动态改变值 -->
              <img :src="ExpenseClickIndex === index ? ExpenseIsClicked[index].icon : item.icon" alt="">
              <span>{{item.title}}</span>
            </div>
            <!-- 其他图标 -->
            <div class="Iconbox" @click="ExpenseClickIcon(999, '其他') ">
            <!-- 实现思路,点击按钮将当前下标值传递给封装的函数那里,然后函数中改变ExpenseClickIndex的值,然后此处判断更改后的值是否为当前的index,然后动态改变值 -->
              <img :src="ExpenseClickIndex === 999 ? 'https://s1.ax1x.com/2020/05/07/YVwCQJ.png' : 'https://s1.ax1x.com/2020/05/07/YVw2pF.png'" alt="">
              <span>其他</span>
            </div>
            <!-- 设置图标 -->
            <div class="Iconbox" @click="JumpSetUp('支出')">
              <img src="../../lib/img/AddTo/setup.png" alt="">
              <span>设置</span>
            </div>
          </div>
          <!-- 收入 -->
          <div class="incomebox" v-else>
            <div class="Iconbox" v-for="(item, index) of RevenueNotClicked" :key="item.iconid" @click="RevenueClickIcon(index, item.title) ">
            <!-- 实现思路,点击按钮将当前下标值传递给封装的函数那里,然后函数中改变RevenueClickIndex的值,然后此处判断更改后的值是否为当前的index,然后动态改变值 -->
              <img :src="RevenueClickIndex === index ? RevenueIsClicked[index].icon : item.icon" alt="">
              <span>{{item.title}}</span>
            </div>
            <!-- 设置图标 -->
            <div class="Iconbox" @click="JumpSetUp('收入')">
              <img src="../../lib/img/AddTo/setup.png" alt="">
              <span>设置</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 弹出键盘 -->
      <van-popup v-model="ejectKeyboard" position="bottom" :style="{ height: '45%' }">
        <!-- <van-cell :title="content" icon="location-o" :value="result" /> -->
        <!-- 上方的输入备注,以及显示计算过程和结果的地方 -->
        <div class="van-cell">
          <!-- 上方备注 -->
          <div class="remarks">
            <img src="../../lib/img/AddTo/beizhu.png" alt="">
            <span>备注：</span>
            <input type="text" :placeholder="remarks" v-model="remark">
          </div>
          <!-- 下方计算式及计算结果 -->
          <div class="calculation">
            <!-- 存放计算式框 -->
            <input type="text" class="CalculationFormula" v-model="CalculationFormula" ref="CalculationFormulaDom" readonly="readonly">
            <!-- <input type="text" v-model="CalculationFormula" @change="iupchange"> -->
            <!-- 存放计算结果框 -->
            <input type="text" class="result" v-model="result" readonly="readonly">
          </div>
        </div>
        <div class="Calculator">
          <!-- 左侧数字键盘 -->
          <div class="number">
            <div v-for="(item, index) in CalculatorKey" :key="index"  @click="index === 11 ? clearFn() : numberFn(index)">
              <span v-if="index < 11">
                {{item}}
              </span>
              <img :src=item alt="" v-else style="height:.35rem">
            </div>
          </div>
          <!-- 右侧功能按钮 -->
          <div class="Button">
            <div @click="dateFn" class="date">
              <img src="../../lib/img/AddTo/rili.png" alt="" style="width: .19rem;">
              <!-- 选择日历 -->
              <span>
                {{ time }}
              </span>
            </div>
            <div @click="plusFn">
              +
            </div>
            <div @click="reduceFn">
              -
            </div>
            <div @click="completeFn">
              完成
            </div>
          </div>
        </div>
      </van-popup>
    </div>
    <!-- 日历弹出框 -->
    <van-calendar v-model="timeshow"  @confirm="onConfirm"/>
  </div>
</template>

<script>
// 直接导入axios请求其他接口数据
import axios from 'axios'
// 导入请求数据函数
// import { BookkeepingIcon } from '@/api'
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { Button, Popup, Cell, CellGroup, Calendar } from 'vant'
Vue.use(Button)
Vue.use(Popup)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Calendar)
export default {
  // 设置data初始值
  data () {
    return {
      ExpenditureOrIncome: true, // 控制显示支出或者收入的内容,支出为true,收入为false
      tabOneflag: true, // 控制被点击后的按钮动态绑定class, 默认显示支出
      tabTwoflag: false, // 控制被点击后的按钮动态绑定class
      ExpenseIsClicked: [], // 支出被点击
      ExpenseNotClicked: [], // 支出未被点击
      RevenueIsClicked: [], // 收入被点击
      RevenueNotClicked: [], // 收入未被点击
      ExpenseClickIndex: -1, // 记录下来当前被点击支出图片的下标
      RevenueClickIndex: -1, // 记录下来当前被点击收入图片的下标
      ExpenseClickTitle: '', // 记录下来当前被点击支出图片的title值
      RevenueClickTitle: '', // 记录下来当前被点击收入图片的title值
      ClickedId: -1, // 记录当前被点击得图标的id值,用于传递给后端来请求图标链接
      Clickedname: '', // 记录当前被点击图表的name值.若是没有备注的话就使用的是这个
      CalculatorKey: ['7', '8', '9', '4', '5', '6', '1', '2', '3', '.', '0', require('../../lib/img/AddTo/clear.png')],
      ejectKeyboard: false, // 弹出键盘false默认收起,true弹出
      remarks: '请输入备注', // 备注输入框
      remark: '', // 备注信息
      CalculationFormula: '', // 计算式
      result: 0, // 计算结果,
      timeshow: false, // 日历弹出
      time: '今天' // 时间,默认显示今天,若是由日历选择,则显示日历上选择的时间
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {
    // // 请求图标文件
    // BookkeepingIcon({
    //   setting: 'setting'
    // }).then((res) => {
    //   console.log('带参数', res)
    // })
    // console.log(localStorage.getItem('lazypiguserid'))
    axios({
      method: 'get',
      url: 'http://60.205.153.211:3000/api/lazypigIcon/lookupIcon',
      params: {
        userid: localStorage.getItem('lazypiguserid')
      }
    }).then((res) => {
      // console.log(res)
      // 只需要获取到状态值Selection为1的图标就行
      res.data.ExpenseIsClicked.map((item, index) => {
        if (item.Selection === '1') {
          this.ExpenseIsClicked.push(item)
        }
      })
      res.data.ExpenseNotClicked.map((item, index) => {
        if (item.Selection === '1') {
          this.ExpenseNotClicked.push(item)
        }
      })
      res.data.RevenueIsClicked.map((item, index) => {
        if (item.Selection === '1') {
          this.RevenueIsClicked.push(item)
        }
      })
      res.data.RevenueNotClicked.map((item, index) => {
        if (item.Selection === '1') {
          this.RevenueNotClicked.push(item)
        }
      })
    })
  },
  // 计算属性
  methods: {
    expenditureFn () {
      // console.log('支出')
      this.ExpenditureOrIncome = true
      this.tabOneflag = true
      this.tabTwoflag = false
    },
    incomeFn () {
      // console.log('收入')
      this.ExpenditureOrIncome = false
      this.tabOneflag = false
      this.tabTwoflag = true
    },
    // 点击支出中图标
    ExpenseClickIcon (index, title) {
      // console.log(index)
      this.ExpenseClickTitle = title
      // console.log(this.ExpenseClickTitle)
      this.ExpenseClickIndex = index
      this.RevenueClickIndex = -1
      this.ejectKeyboard = true
      // 记录下来当前被点击图表的id值和name值
      this.ClickedId = this.ExpenseIsClicked[index].iconid
      this.Clickedname = title
    },
    // 点击收入中图标
    RevenueClickIcon (index, title) {
      // console.log(index)
      this.RevenueClickTitle = title
      // console.log(this.RevenueClickTitle)
      this.ExpenseClickIndex = -1
      this.RevenueClickIndex = index
      this.ejectKeyboard = true
      // 记录下来当前被点击图表的id值和name值
      this.ClickedId = this.RevenueIsClicked[index].iconid // 根据相应的下标值在被点击数组中获取到当前下标位的元素id,即被点击的图标id值
      this.Clickedname = title
    },
    // 点击设置按钮跳转到设置图标的的页面中
    JumpSetUp (data) {
      // console.log(data)
      this.$router.push({ path: '/my_SetUp/CategorySettings', query: { my_SetUp: data } })
    },
    // 计算器弹出框种的函数
    // 1.日期按钮,点击弹出日历选择组件
    dateFn () {
      // console.log(1)
      this.timeshow = true
    },
    // 1.1日历弹出层
    onConfirm (data) {
      // 关闭日历框
      this.timeshow = false
      // console.log(data)
      // console.log(data.getFullYear()) // 年
      // console.log(data.getMonth() + 1) // 月
      // console.log(data.getDate()) // 日
      this.time = `${data.getFullYear()}/${data.getMonth() + 1}/${data.getDate()}`
    },
    // 2.加
    plusFn () {
      // 先点击按钮的时候获取到input的焦点框
      this.$refs.CalculationFormulaDom.focus()
      // 加减完成以及回退按钮的时候都需要调用这个函数,进行计算
      this.DecompositionCalculation(this.CalculationFormula)
      this.CalculationFormula += '+'
    },
    // 3.减
    reduceFn () {
      this.$refs.CalculationFormulaDom.focus()
      // 加减完成以及回退按钮的时候都需要调用这个函数,进行计算
      this.DecompositionCalculation(this.CalculationFormula)
      this.CalculationFormula += '-'
    },
    // 4.完成 / =
    completeFn () {
      // 加减完成以及回退按钮的时候都需要调用这个函数,进行计算
      this.DecompositionCalculation(this.CalculationFormula)
      // 如果填写备注了的话就像后端传备注,如果没有的话就直接传name值
      const tit = this.remark.length > 0 ? this.remark : this.Clickedname
      // 如果时间选择是今天的话呐this.time就为今天的时间 2020/05/20,若是选择了的话就用选择的时间
      let timer = ''
      if (this.time === '今天') {
        const date = new Date()
        const Year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        timer = `${Year}/${month}/${day}`
      } else {
        timer = this.time
      }
      // console.log(this.ClickedId)
      // console.log(timer)
      // console.log(this.result)
      // 然后请求添加记账的接口
      axios({
        method: 'post',
        url: 'http://60.205.153.211:3000/api/lazyBookkeeping/AddPosting',
        data: {
          userid: localStorage.getItem('lazypiguserid'),
          remark: tit,
          timer: timer,
          bill: this.result,
          iconid: this.ClickedId
        }
      }).then((res) => {
        // console.log(res)
        // 以上工序完成之后清空输入框
        this.remark = ''
        this.CalculationFormula = ''
      })
      this.ejectKeyboard = false
    },
    // 5回退
    clearFn () {
      this.DecompositionCalculation(this.CalculationFormula)
      this.CalculationFormula = this.CalculationFormula.slice(0, this.CalculationFormula.length - 1)
    },
    // 6.数字键盘
    numberFn (index) {
      // 敲击数字键盘的时候根据Vue的ref自动将输入计算式的input框获取焦点
      this.$refs.CalculationFormulaDom.focus()
      // 敲击键盘以及右侧功能按钮中的加或者减的时候都记录到
      // console.log(index)
      this.CalculationFormula += `${this.CalculatorKey[index]}`
    },
    // 7.封装一个函数用于对计算表达式进行分解结算结果,形如str = '1+2+3+4+5+6+7+8+9-10+50+40-50+20-40'
    DecompositionCalculation (str) {
      // 第一步先对此表达式进行其中某一个符号的分割位为数组
      const arr = str.split('+')
      // console.log('arr', arr)
      // 然后分别定义两个数组用来存放前缀为+和-的数据
      const pluslist = []
      const reducelist = []
      // 然后循环遍历这个总数组
      arr.map((item, index) => {
        // 人后判断其中的元素 * 1是否为NaN,因为非数字字符串 * 1 = NaN不会被转为数字,这样找出来的数字就是目前为止前缀为+的元素,
        if (isNaN(item * 1) === false) {
          pluslist.push(item)
        // 然后剩余的就是没有被分割开的第一个数前缀为+的算术表达式
        } else if (isNaN(item * 1) === true) {
          // 这个时候我们就可以将这个元素根据 - 来继续二次分割为数组
          const arr2 = item.split('-')
          // 然后继续循环遍历这个数组
          arr2.map((itm, idx) => {
            // 然后将其中下标为0的前缀为 + 的元素保存到pluslist数组中
            if (idx === 0) {
              pluslist.push(itm)
              // console.log('pluslist01', pluslist)
            // 而后将前缀为 - 的其他元素保存到reducelist数组中
            } else {
              reducelist.push(itm)
              // console.log('reducelist01', reducelist)
            }
          })
        }
      })
      // 因为这个只会存在第一次切割变为 ["1", "2", "3", "4", "5", "6", "7", "8", "9-10", "50", "40-50", "20-40"]的形式,只需要进行两层循环就能把数据分类取出来了,所以不需要再继续深入了
      // 最后将这两个数组中的元素分别相加,用数组pluslist中的和减去reducelist数组中的和,就是我们最后需要得到的那个计算结果数据
      const Resultsplus = pluslist.reduce((prev, cur, index, arr) => {
        return prev * 1 + cur * 1
      })
      // 注意一定要在这个加上一层判断,因为reduce方法在用于空数组中的时候,nodejs会返回TypeError: Reduce of empty array with no initial value,所以需要加一层判断reducelist数组中是否为空,若不为空则可直接将两个数组中的值进行计算,若是为空了则直接把
      if (reducelist.length !== 0) {
        const Resultsreduce = reducelist.reduce((prev, cur, index, arr) => {
          return prev * 1 + cur * 1
        })
        this.result = Resultsplus - Resultsreduce
      } else {
        this.result = Resultsplus
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 样式
  @import '@/assets/css/community/index.scss';
  .box {
    .content {
      .contentbox {
        height: 100%;
        display: flex;
        flex-direction: column;
        // 头部
        .header {
          height: 10%;
          width: 100%;
          background-color: #fdd949;
          display: flex;
          // 支出收入
          div {
            height: 100%;
            width: 50%;
            display: flex;
            align-items: center;
            // 支出
            &:nth-of-type(1) {
              flex-direction: row-reverse;
            }
            // 其中的按钮
            button {
              width: .80rem;
              height: 100%;
              background-color: #fdd949;
              border: 0;
            }
            // 被点击后的按钮样式
            .ClickBut {
              border-bottom: .001rem #917d2a solid;
            }
          }
        }
        // 内容
        .contents {
          height: 90%;
          overflow: auto;
          .expenditurebox, .incomebox{
            display: flex;
            // justify-content: space-around;
            flex-wrap: wrap;
            .Iconbox {
              width: 25%;
              height: 1.0rem;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              img {
                height: .52rem;
                width: .52rem;
              }
            }
          }
        }
      }
      // 键盘弹出框
      /deep/ .van-popup {
        display: flex;
        flex-direction: column;
        // 上方头部显示备注计算式子以及计算结果的区域
        .van-cell {
          height: 1.20rem;
          width: 100%;
          padding: .12rem 0.12rem 0;
          background-color: #f4f4f4;
          display: flex;
          flex-direction: column;
          // 显示备注的区域
          .remarks {
            width: 100%;
            height: 30%;
            img {
              height: .18rem;
              margin-right: .09rem;
              width: 5%;
            }
            span {
              width: 10%;
            }
            input {
              width: 75%;
              border: 0;
            }
          }
          // 下方显示计算的区域
          .calculation {
            height: 70%;
            width: 100%;
            input {
              height: 50%;
              width: 100%;
              border: 0;
              padding: 0 .10rem;
              text-align: right;
            }
          }
        }
        // 下方键盘
        .Calculator {
          flex: 1;
          width: 100%;
          display: flex;
          background-color: #f4f4f4;
          // 左侧数字区域
          .number {
            height: 100%;
            flex: 1;
            // background-color: aquamarine;
            display: flex;
            flex-wrap: wrap;
            border: .001rem #d7d7da solid;
            div {
              width: 33.3333%;
              height: 25%;
              display: flex;
              justify-content: center;
              align-items: center;
              border: .001rem #d7d7da solid;
              border-left: 0;
              border-top: 0;
            }
          }
          // 右侧功能按钮区域
          .Button {
            height: 100%;
            width: 25%;
            // background-color: burlywood;
            display: flex;
            flex-direction: column;
            border: .001rem #d7d7da solid;
            border-left: 0;
            div {
              height: 25%;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              border-bottom: .001rem #d7d7da solid;
            }
          }
        }
      }
    }
  }
</style>
